import { onLongPress } from "@vueuse/core";
import useRecordRTC from "../../hooks/useRecordRTC";
import useVibrate from "../../hooks/useVibrate.ts";
/*const { default: useRecordRTC } = await import("./useRecordRTC");
console.log( 333, useRecordRTC);*/
export function useLongPress(
  callback: (e: PointerEvent) => void,
  refName: string
) {
  const { stop } = useVibrate();
  const recordEl = useTemplateRef<HTMLElement>(refName);
  onLongPress(recordEl, callback, {
    delay: 500,
    modifiers: {
      prevent: true
    }
  });
  const handlePointerUp = () => {
    const { stopRecording } = useRecordRTC();
    stopRecording();
    stop();
  };
  const handlePointerLeave = () => {
    handlePointerUp();
    stop();
  };
  onMounted(() => {
    if (recordEl.value) {
      recordEl.value.addEventListener("pointerup", handlePointerUp);
      recordEl.value.addEventListener("pointerleave", handlePointerLeave);
    }
  });
  onUnmounted(() => {
    if (recordEl.value) {
      recordEl.value.removeEventListener("pointerup", handlePointerUp);
      recordEl.value.removeEventListener("pointerleave", handlePointerLeave);
    }
  });
  return { recordEl };
}
